<template>
  <div>
    <el-container>
      <el-header class="header">
        <div class="div1">
          <img
            src="
            Q+2YdYildRSGn2Pr2t0tdreo2CgqdmN3r93dXdiN3YGCYGC3otiKun/YsSrmquuRZzmz3B13nDsz986O4IHLwHz
            f/e55z+8973nPF/zHI/7j+fM/gP46wcycGVgPuCEifs7MsSNi+IA/gcycAzgCWAlYPSI+y8z5AQG8OWABZOa8w
            FHA1sCXwIoR8XElvxpwe0R8PeAAZObCwDHAJsBYwLfAyhHxdmbOA6wNDIqI06XvgAGQmUsBxwLrN/TVj
            8BqEfFyZs4JrANMWPQ5Y0AAqMRPAdbqJAi/We2IeCIzZwQ2M3FgEuDziLhijALIzBWLKp0TN
            68/gQ0j4sHMnArYGZgASGAc4JWIuH+MAMjMNYGj5XUXEvwXsE1E3JqZVnvfovqkwK/AuMB9EfFi
            vwLITDXc5lzmX2aHye8VEZdnphU/tO6V9z8VfSYDDnYWtB1AZqoiG1fFF21i6O1RyUuTM
            6viJj4t8BkwKzAsIg7ueFZbVMgpCWwFHAk4dJqJI5TGAn0+8FXx3n6QPsbvw
            DcRcXZbAGSm/NweOByYq5ms654zIsLvkJnnAu8BU5RkSqVhpUBTVgNf1VIA
            xdddirOz9CBxb70sIvas5E8FhgBOYRP/AZgY+AWYHJD3T0XEvS0BkJm
            DgD1sKmD6Hibu7beU4mRmegJyf76ij9y3qccrEH8AUwOnRcS7fQJQiQ8GDg
            DU6d7EA6X1wzPTflFejWcBp66Vnw74tE5j/JLQHSJCYCOiR02cmUrYPn1M3N
            99vKbssJLXvYCnge+BdYGhTlsbtkCYp4D+ighPfGQ0BSAzbR6r7VARRF/ipfI
            3P2XmKsCFwAmVuBR6AZgBWAT4pGhjD+iLtNCCbQ5AZnqE8tsmk+99jbfKWQ7NzK
            WB26qHjgeuAxQAB937wDvAbNW8DrLhgouIy7oFUNvPYYDKohq0Ij4qT/95Zi4IPAT
            sWAPLBtZd2hfqv1ba+9V9lUgA5nFNRDzfJYCG7Uctt/tbFU7RjoXEBn0CU
            AQ0aXfU30uBXYEvgCeBhYAlCpAgbOLdIsI+GZVCmTkRcBGwU6
            sybniODelC8lbZ4qeAK+u6kqnuq/FaDQfUQYBGzWEmW
            Glkr04TEct1zm9kE2emOr57fWyiVkTjQqL
            cWnmTs+p6HRXtcuA8YNUCckNR1+n7clV
            e4Zg1ItzGRol/qFDZgY1KcfTsvY3GhURb/GjJpGr2cG1etwP7F4gDAfvO/znEpJe78Kt1AtFhN7pt4o4baj9VhbaoSjQLpnEhUR
            pNWClW4x8BtAwrNDxM3q9RQPy9+2qp2bRc6AfAM+4I3Z7A6DLMTEe4iqScamn/LRoXEu30jTVlbUjpokQ+U7TZErgeO
            K4+Umn2Wh8vqd9yY3OoabVHWoiOBJoaZA0nok126Za7q3eBYoSn91pmqiwqmvdu4AAri
            Xy9CqLdPgdwJz6xZo4gVCPV5jFggTq56RotRK8ANCZc720EYoJy3Bjh6St5/x4CbF4mzQG0
            eJ3Cd4B6LjU9AZVH/m9Xz3muliALYD9sHBGLja5gPTqBLuhl8g6k8SP
            irErewXRa2Q+VR8po2FS3kwEthEnaEzatk3gHwF3g2vqem5zKeI9LUURIt39E
            nwF0fmJmarasnDSyqm8AdwNXV9L2ksmoUq8B+xU4Oa+ECs5rApdiDwLvdpxsr5q4
            WempdVDDN3fRwsVDATApKaM90POoJkuWdbaBHVBedzpLvQuqH+wdh93giNB69MsJ+D7
            n3lIu5dKPp7J3OUxtwk2ViZx3ODmdtwXurAb2Za6AlE+be6aIUGr7BYAvn1QQK31BR
            AzJTLVdKfTdpnbYyjqRTdQKdxhGLYX0MdkNAZf7wyOiy22vHT0ggMZweRGMw8lhNlNV
            XSBK5IeAk/+uklZfGUpDVUuJXWp0FqLPMtpVX7jcdnHNU7EnPJXXMlMg+p/dqslPKqpd
            XK/VfRfqadjA9sZooz9OoPMPexLutSNtcWY64HSjyzbQyWHnK
            R3TeYlpfGB/A7D6XVazXqHrWm8utyqdlu+8xIwpADtGhL3QbdR
            +4kLjfrBMREilMUYht6lV5H23mffihnZTSB47F9y62hLtBKAVMPlRdt
            hWo2gXgOsjQnPW9mgHACWyqWZtBbqWA2hFUj15xv8AelKtdtz7N3tXKk830y/qAAAAAElFTkSuQmCC"
            class="imgs"
          />
        </div>
        <el-radio-group v-model="isCollapse">
          <el-button
            type="info"
            icon="el-icon-s-unfold"
            round
            class="btn"
            @click="isCollapse = !isCollapse"
          ></el-button>

          <!-- 下拉菜单 -->
          <el-dropdown id="dropdown">
            <el-button type="primary"  @click="Delete"> 退出登录 </el-button>
          </el-dropdown>
        </el-radio-group>
      </el-header>

      <el-container>
        <el-aside width="200px">
          <el-col class="col">
            <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b"
              router
              :collapse="isCollapse"
            >
              <el-submenu index="1">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>基础管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/home/dity">商品管理</el-menu-item>
                </el-menu-item-group>
              </el-submenu>

              <el-submenu index="2">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>订单管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/home/order">交易订单</el-menu-item>
                </el-menu-item-group>
              </el-submenu>

              <el-submenu index="3">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>系统管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/home/system">用户管理</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-aside>
        <el-main><router-view></router-view></el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isCollapse: false,
    };
  },
  methods: {
    Delete() {
      localStorage.removeItem("token");
      this.$router.push({ path: "/" });
    },
  },
};
</script>
<style lang="scss">
.header {
  background: #545c64;
  display: flex;
  position: relative;
}
.imgs {
  text-align: center;
  margin-top: 10px;
}
.div1 {
  width: 180px;
  height: 60px;
  // background: lightcyan;
  text-align: center;
  border-right: 2px solid #cccccc;
}
.el-menu-vertical-demo {
  height: 100%;
}
.col {
  height: 100%;
}
.btn {
  margin-top: 6px;
  font-size: 20px;
}
#dropdown {
  position: absolute;
  right: 10px;
  top: 8px;
}
</style>